<template>
    <div class="large-left3 large-panel" @click="openChild">
        <div class="panel-title">
            <div class="panel-title-box">
                <img class="panel-title-ico" src="@/assets/large/panel-title-ico.png" />
                每日就诊
            </div>
            <img class="panel-title-bg" src="@/assets/large/panel-title.png" />

        </div>
        <div class="table-box large-table">
            <a-table bordered :loading="loading" :rowKey="(item,i)=>'day_'+i" :columns="columns" :data-source="pageList" :scroll="{y: '20vh' }"
                :pagination="false" :rowClassName="(record, index) => index % 2 === 0 ? 'even-row' : 'odd-row'">

            </a-table>
        </div>
        <Left3childVue :visible="childVisible" @closeModal="() => childVisible = false" v-if="childVisible"/>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
import Left3childVue from "../child/left3child.vue";
@Component({
    name: "home",
    components: {Left3childVue},
})
export default class extends Vue {
    @Prop({ default: () => {} }) pageData!: any;
    @Watch("pageData")
    pageDataChange() {
        this.setPageData();
    }
    loading=false
    pageList: any[] = [];

    mounted() {}
    setPageData(){
        if (!this.pageData || !this.pageData.patientList) return;
        this.pageList=this.pageData.patientList
    }
    columns = [
        {
            align: "center",
            dataIndex: "patientName",
            key: "patientName",
            title: "患者",
            width: 80,
        },
        {
            align: "center",
            dataIndex: "consultationNumber",
            key: "consultationNumber",
            title: "诊号",
            width: 80,
        },
        {
            align: "center",
            dataIndex: "type",
            key: "type",
            title: "类型",
        },
        {
            align: "center",
            dataIndex: "department",
            key: "department",
            title: "科室",
            width: 120,
        }
    ];

    childVisible = false;
    openChild() {
        this.childVisible=true
    }
}
</script>
<style lang="scss">
.large-left3 {
    #largeChartleft3 {
        width: 100%;
        height: 15vh;
    }
}
</style>
